<template>
  <Col>
  <Select style="width:19%" placeholder="国家" filterable :not-found-text="'无数据'" v-model="searchParam.country" v-if="currentUser.level == 1 && currentUser.level != 5" @on-change="countryChangeHandle(searchParam.country)">
    <area-no-data-text :area-data="countrys"></area-no-data-text>
    <Option v-for="(item, index) in countrys" :key="index" :value="item.id">{{item.areaName}}</Option>
  </Select>
  <Select style="width:19%" placeholder="大区" filterable :not-found-text="'无数据'" v-model="searchParam.area" v-if="currentUser.level == 1 && currentUser.level != 5"  @on-change="areaChangeHandle(searchParam.area)">
    <area-no-data-text :area-data="areas"></area-no-data-text>
    <Option v-for="(item, index) in areas" :key="index" :value="item.id">{{item.areaName}}</Option>
  </Select>
  <Select style="width:19%" placeholder="省或直辖市" filterable :not-found-text="'无数据'" v-model="searchParam.province" v-if="currentUser.level != 4 && currentUser.level != 3 && currentUser.level != 5" @on-change="provinceChangeHandle(searchParam.province)">
    <area-no-data-text :area-data="provinces"></area-no-data-text>
    <Option v-for="(item, index) in provinces" :key="index" :value="item.id">{{item.areaName}}</Option>
  </Select>
  <Select style="width:19%" placeholder="市" filterable :not-found-text="'无数据'" v-model="searchParam.city" v-if="currentUser.level != 4 && currentUser.level != 5"  @on-change="cityChangeHandle(searchParam.city)">
    <area-no-data-text :area-data="citys"></area-no-data-text>
    <Option v-for="(item, index) in citys" :key="index" :value="item.id">{{item.areaName}}</Option>
  </Select>
  <Select style="width:19%" placeholder="区县" filterable :not-found-text="'无数据'" v-model="searchParam.county" v-if="currentUser.level != 5" @on-change="countyChangeHandle(searchParam.county)">
    <area-no-data-text :area-data="countys"></area-no-data-text>
    <Option v-for="(item, index) in countys" :key="index" :value="item.id">{{item.areaName}}</Option>
  </Select>
  </Col>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import AreaNoDataText from "./AreaNoDataText.vue";
  import {SERVICE_URLS} from "../../libs/service.url";

  export default {
    components: {
      AreaNoDataText
    },
    data() {
      return {
        countrys : [],
        areas : [],
        provinces : [],
        citys : [],
        countys : [],
        searchParam : {
          country : '',
          area : '',
          province : '',
          city : '',
          county : ''
        }
      }
    },
    created() {
      if (this.currentUser.level != 5) {
        switch (this.currentUser.level) {
          case 1 :
          case 2 :
            this.getCountry();
            break;
          case 3 :
            this.provinceChangeHandle(this.currentUser.areaId);
            break;
          case 4:
            this.cityChangeHandle(this.currentUser.areaId);
            break;
          default:
            this.getCountry();
            break;
        }
      }
    },
    computed:{
      currentUser () {
        return this.$store.getters.currentUser
      }
    },
    methods: {
      resetAreaSelect(level){
        switch (level) {
          case -1 :
            this.searchParam.country = '';
            this.searchParam.area = '';
            this.searchParam.province = '';
            this.searchParam.city = '';
            this.searchParam.county = '';
            this.areas = [];
            this.provinces = [];
            this.citys = [];
            this.countys = [];
            break;
          case 1 :
            this.searchParam.area = '';
            this.searchParam.province = '';
            this.searchParam.city = '';
            this.searchParam.county = '';
            this.areas = [];
            this.provinces = [];
            this.citys = [];
            this.countys = [];
            break;
          case 2 :
            this.searchParam.province = '';
            this.searchParam.city = '';
            this.searchParam.county = '';
            this.provinces = [];
            this.citys = [];
            this.countys = [];
            break;
          case 3 :
            this.searchParam.city = '';
            this.searchParam.county = '';
            this.citys = [];
            this.countys = [];
            break;
          case 4 :
            this.searchParam.county = '';
            this.countys = [];
            break;
          default :
            break;
        }
      },
      getSource(id) {
        if (id === '') {
          return new Promise((resolve, reject) => {
            resolve([]);
          })
        }
        const self = this;
        return new Promise(function (resolve, reject) {
          Vue.submit(self, {
            url: SERVICE_URLS.userManage.areaList,
            params: {
              parentId: id,
              level: 0
            },
            callback: (data) => {
              resolve(data);
            }
          })
        })
      },
      getCountry() {
        let self = this;
        this.getSource('-1').then((data)=> {
          this.countrys = data;
        }).catch((error)=> {
          self.$message.warning({
            showClose: true,
            message: error
          })
        })
      },
      countryChangeHandle (countryId) {
        if (countryId === '') {
          return;
        }
        this.resetAreaSelect(1);
        this.$emit('areaUpdate',{level : 1,areaId : countryId});
        this.searchParam.level = 2;
        this.searchParam.areaId = countryId;
        this.getSource(countryId).then((data) => {
          this.areas = data;
        });
      },
      areaChangeHandle (areaId) {
        if (areaId === '') {
          return;
        }
        this.resetAreaSelect(2);
        this.$emit('areaUpdate',{level : 2,areaId : areaId});
        this.searchParam.level = 3;
        this.searchParam.areaId = areaId;
        this.getSource(areaId).then((data) => {
          this.provinces = data;
        });
      },
      provinceChangeHandle (provinceId) {
        if (provinceId === '') {
          return;
        }
        this.resetAreaSelect(3);
        this.$emit('areaUpdate',{level : 3,areaId : provinceId});
        this.searchParam.level = 4;
        this.searchParam.areaId = provinceId;
        this.getSource(provinceId).then((data) => {
          this.citys = data;
        })
      },
      cityChangeHandle (cityId) {
        if (cityId === '') {
          return;
        }
        this.resetAreaSelect(4);
        this.$emit('areaUpdate',{level : 4,areaId : cityId});
        this.searchParam.level = 5;
        this.searchParam.areaId = cityId;
        this.getSource(cityId).then((data) => {
          this.countys = data;
        })
      },
      countyChangeHandle(countyId){
        if (countyId === '') {
          return;
        }
        this.$emit('areaUpdate',{level : 5,areaId : countyId});
        this.searchParam.areaId = countyId;
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
